
function  init(){
    chrome.storage.local.get('addresses', function(result) {
        let list = document.querySelector(".list");
        let html="";
        if(result.addresses!=undefined){
            result.addresses.forEach(element => {
                let item = `
                <li class="li">
                <div class="delete">x</div>
                <div>
                    <div class="item">
                        原网址:
                        <input type="text" readonly value="${element.origin}">
                        <div class="button">
                            <div class="change">
                                <button>更改</button>
                            </div>
                            <div class="submit">
                                <button class="submit_btn">提交</button> <button class="cancel_btn">取消</button>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div>
                    <div class="item">
                        跳转网址:
                        <input type="text" readonly value="${element.jump}">
                        <div class="button">
                            <div class="change">
                                <button>更改</button>
                            </div>
                            <div class="submit">
                                <button class="submit_btn">提交</button> <button class="cancel_btn">取消</button>                              
                            </div>
                            
                        </div>
                    </div>
                </div>                 
            </li>
            `
            html+=item;
                    });
        }
        list.innerHTML=html;
        addOnclik();
    });
}
init();
function addOnclik(){
    let list = document.querySelector(".list")
    let lis;
    let items = document.querySelectorAll(".item");
    let addBtn = document.querySelector(".add_btn");
    let addCBtn = document.querySelector(".add_cancel")
    items.forEach((item,index)=>{
        let change = item.querySelector(".change");
        let submit = item.querySelector(".submit");
        let Cbtn = change.querySelector("button");
        let submitBtn = submit.querySelector(".submit_btn");
        let canceltBtn = submit.querySelector(".cancel_btn");
        let input = item.querySelector("input");
        //更改按钮
        Cbtn.onclick=()=>{
            change.style.display="none";
            submit.style.display="block";
            input.readOnly=false;
        }
        //提交按钮
        submitBtn.onclick=()=>{
            console.log(input.value,index/2);
            let addresses=[]
            chrome.storage.local.get("addresses",function(result){
                addresses = result.addresses;
                if(index%2==0){
                    addresses[index/2].origin=input.value;

                }else{
                    addresses[(index-1)/2].jump=input.value;
                }             
                let obj={
                    "addresses":addresses
                }
                chrome.storage.local.clear();
                chrome.storage.local.set(obj,function(){
                    console.log("重写完毕");    
                })
            })
        submit.style.display="none";
        change.style.display="block";
        }
        //取消按钮
        canceltBtn.onclick=()=>{
            submit.style.display="none";
            change.style.display="block";
            input.readOnly="readOnly";
        }
    })
    //增加跳转按钮
    addBtn.onclick=function(){
        console.log(list);
        list.appendChild(addLi());
        addBtn.style.display="none";
        addCBtn.style.display="block";
        lis= list.querySelectorAll("li");
    }
    addCBtn.onclick=()=>{
        list.removeChild(lis[lis.length-1]);
        addCBtn.style.display="none";
        addBtn.style.display="block";
    }
    lis= list.querySelectorAll("li");
    //删除功能部分
    lis.forEach((item,index,arr)=>{
        try {
            item.querySelector('.delete').onclick=()=>{
                chrome.storage.local.get("addresses",function(result){
                    result.addresses.splice(index,1);
                    chrome.storage.local.clear();
                    chrome.storage.local.set(result,function(){
                        console.log("删除成功")
                    })
                })
                item.style.display="none";
            }
        } catch (error) {
            console.log(index);
            console.log(item);
        }

    })
}

function addLi(origin="",jump=""){
    if(localStorage.origin||localStorage.jump){
        origin=localStorage.origin;
        jump=localStorage.jump;
    }
    let list = document.querySelector(".list");
    let addli = document.createElement("li");
    let c = document.createAttribute("class");
    addli.attributes.setNamedItem(c);
    addli.setAttribute("class","li_add");
    let add = `
        <div>
            <div class="item_add">
                原网址:
                <input type="text" value="${origin}">
                <div class="button">
                    <div >
                        <button class="staging">暂存</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="item_add">
                跳转网址:
                <input type="text" value="${jump}">
                <div class="button">
                    <div class="submit_add">
                        <button class="submit_btn">提交</button>                            
                    </div>
                    
                </div>
            </div>
        </div>                 
        `
    addli.innerHTML=add;
    list.appendChild(addli);
    //暂存按钮    
    let inputs = addli.querySelectorAll("input");
    addli.querySelector(".staging").onclick=()=>{
        localStorage.origin = inputs[0].value;
        localStorage.jump = inputs[1].value;
    }     
    //增加跳转网址提交按钮
    let addBtn = document.querySelector(".add_btn");
    let addCBtn = document.querySelector(".add_cancel")
    addli.querySelector(".submit_btn").onclick=()=>{
        let lis= list.querySelectorAll("li");
        let obj={
            "origin":inputs[0].value,
            "jump":inputs[1].value
        }
        chrome.storage.local.get("addresses",function(result){
            if(result.addresses!=undefined){
                
            }else{
                result={
                    "addresses":[]
                }
            }
            result.addresses.push(obj);
            chrome.storage.local.clear();
            chrome.storage.local.set(result,function(){
                console.log("添加完成");
                localStorage.clear();
                //删除节点，增加节点
                list.removeChild(lis[lis.length-1]);
                list.appendChild(normalLi(obj.origin,obj.jump));
                console.log(normalLi(obj.origin,obj.jump));

            })
            
        });

        addBtn.style.display="block";
        addCBtn.style.display="none";
        


    }
    return addli;
}

function normalLi(origin,jump){
    let li = document.createElement("li");
    let c = document.createAttribute("class");
    li.attributes.setNamedItem(c);
    li.setAttribute("class","li");
    let item = `
            <div class="delete">x</div>
            <div>
                <div class="item">
                    原网址:
                    <input type="text" readonly value="${origin}">
                    <div class="button">
                        <div class="change">
                            <button>更改</button>
                        </div>
                        <div class="submit">
                            <button class="submit_btn">提交</button> <button class="cancel_btn">取消</button>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div>
                <div class="item">
                    跳转网址:
                    <input type="text" readonly value="${jump}">
                    <div class="button">
                        <div class="change">
                            <button>更改</button>
                        </div>
                        <div class="submit">
                            <button class="submit_btn">提交</button> <button class="cancel_btn">取消</button>                              
                        </div>
                        
                    </div>
                </div>
            </div>                 
        `
        li.innerHTML=item;
        let list = document.querySelector(".list");
        let lis = list.querySelectorAll("li");
        let index = lis.length/2;
        let change = li.querySelector(".change");
        let submit = li.querySelector(".submit");
        let Cbtn = change.querySelector("button");
        let submitBtn = submit.querySelector(".submit_btn");
        let canceltBtn = submit.querySelector(".cancel_btn");
        let input = li.querySelector("input");
        //更改按钮
        Cbtn.onclick=()=>{
            change.style.display="none";
            submit.style.display="block";
            input.readOnly=false;
        }

        //取消按钮
        canceltBtn.onclick=()=>{
            submit.style.display="none";
            change.style.display="block";
            input.readOnly="readOnly";
        }
        //提交按钮
        submitBtn.onclick=()=>{
            console.log(input.value,index/2);
            let addresses=[]
            chrome.storage.local.get("addresses",function(result){
                //可优化
                addresses = result.addresses;
                    addresses[index].origin=input.value;
                    addresses[index].jump=input.value;        
                let obj={
                    "addresses":addresses
                }
                chrome.storage.local.clear();
                chrome.storage.local.set(obj,function(){
                    console.log("重写完毕");    
                })
            })
        submit.style.display="none";
        change.style.display="block";
        }  
       
    //删除功能部分
            li.querySelector('.delete').onclick=()=>{
                chrome.storage.local.get("addresses",function(result){
                    result.addresses.splice(index,1);
                    chrome.storage.local.clear();
                    chrome.storage.local.set(result,function(){
                        console.log("删除成功")
                    })
                })
                li.style.display="none";
            }
    return li;      
}